Skip to main content
Version: 6.0.2

Usage Instructions with Example


The following instructions are using an example from the formsflow.ai - Freedom of Information and Protection of Privacy.

Designer Steps

  • Log in to http://localhost:3000 (forms-flow-web) with valid [user credentials for the designer](default user credential.html).

  • After the login is successful you will be redirected to http://localhost:3000/form where you can Create / Upload / Download / View / Edit / Delete a form.

    Image

  • A new form can be created by two methods: designing a new form, or by uploading an existing form in JSON format.

    • Create a New Form
      1. Click on Create New Form Button. The web page to design the form opens.

      2. Fill in the details, drag and drop the required components, to build the form.

        ![Image](/img/Screenshot 2022-08-17 170901.png)

      3. The components can be customized as they are added.

    • Upload a Form
      1. A form in JSON format can be uploaded using the Upload Form button.

There are few example JSON files in our repository which can be downloaded by clicking Here.

  • Example: Upload FreedomOfInformationAndProtectionOfPrivacy.json file.

    Image

  • You can modify the form by clicking on the View/Edit Form button or continue by clicking the Next button.

    Image

  • At this stage form designing is completed. You can click on the EDIT button and associate a default workflow if you want.

    Image

  • In order to deploy any other workflow,

    go to https://github.com/AOT-Technologies/forms-flow-ai-examples/blob/main/bpm-examples/camunda/approval-process.zip and download any sample workflow (e.g.: one-step-approval.bpmn).

    Image

  • Move to Processes tab, choose the workflow one-step-approval, enter a deployment name and click on Deploy.

    ![Image](/img/Screenshot 2022-08-12 120358.png)

    Workflow

  • After associating the workflow, click on the Next button to Preview and Confirm.

    Image

  • You can click on the Next Button and publish the form for clients.

    Image

  • Click on Save button to complete designing a form.

  • Form designing is successfully completed, you can now Log out and go to Client Steps.

Client Steps

  • Log in to http://localhost:3000 (forms-flow-web) with valid [default user credentials for the client](default user credential.html).

  • After the login is successful you will be redirected to http://localhost:3000/form where you can View and Submit a form.

    Image

  • Click Submit New Button on the form to fill and submit it.

    Image

  • If you had associated a workflow with the form, the form will start the workflow.

  • Once this action is completed, you can now log out and go to Reviewer Steps if you have a user review mentioned in your workflow.

Reviewer Steps

  • Log in to http://localhost:3000 (forms-flow-web) with valid [default user credentials for the reviewer](default user credential.html).

  • After the login is successful you will be redirected to http://localhost:3000/task.

    Image

  • You can navigate to the Applications tab to view the Form submissions.

    Image

  • You can View the submissions against a form by clicking on the View button.

    Image

  • You can click on the Export PDF button to view the submission data as a PDF.

    Image

  • On clicking the associated task that was recently created, i.e., Freedom of Information and Protection of Privacy, the task detailed menu usually has three sections - Form, History, Diagram.

    Image

    Image

    Image

  • On claiming the task, the Reviewer can mark the form as reviewed or to return it with his/her feedback to the client.

    Image

    Image

  • In the Application section, the form submission history can be found and the form can be viewed.

    Image

    Image

  • Reviewer action is completed.

Create New Business License Application

The following instructions are using an example form from the Form.io - Create New Business License Application.

Designer Steps

  • Log in to http://localhost:3000 (forms-flow-web) with valid [user credentials for the designer](default user credential.html).

  • After the login is successful you will be redirected to http://localhost:3000/form where you can Create / View / Edit / Delete a form.

    Image

  • Select the New Business License Application form by clicking on it.

  • You can modify the form by clicking on the View/Edit Form button or continue by clicking the Next button.

    Image

  • At this stage form designing is completed, you can click on the EDIT Button and associate a workflow - Two-Step Approval-listener.

    Image

  • After the associate workflow is completed click on the Next Button to Preview and Confirm.

    Image

  • Click on SAVE Button to complete designing a form.

  • Form designing is successfully completed, you can now Log out and go to Client Steps.

Client Steps

  • Log in to http://localhost:3000 (forms-flow-web) with valid [default user credentials for the client](default user credential.html).

  • After the login is successful you will be redirected to http://localhost:3000/form where you can View and Submit a form.

    Image

  • Click Submit New button on the form which you wanted to submit.

  • The previous action will redirect you to the form, where you can fill in the details and Submit them.

    Image

  • Fill in the details and Submit the form, You can repeat this action as per your requirement.

    Image

  • If you had associated a workflow with the form, the form will start the workflow.

  • This action is completed, you can now Log out and go to Clerk Steps.

Clerk Steps

  • Log in to http://localhost:3000 (forms-flow-web) with valid [default user credentials for Clerk](default user credential.html).

  • After the login is successful you will be redirected to http://localhost:3000/task.

    Image

  • You can navigate to the Applications tab to View the Form submissions.

    Image

  • The associated task can be found for the Clerk role in the Task Menu section.

  • On clicking the associated task which was recently created, i.e., New Business License Application with Two-Step Approval-listener, the task detailed menu usually has three sections – Form, History, Diagram.

    Image

    Image

    Image

  • On claiming the task, the Clerk is able to mark the form as reviewed or to return it with his/her feedback to the client.

  • Return option will send the form back to the client for edit and resubmission.

    Image

    Image

  • On returning, the form application status changes from New to Resubmit with an edit option.

    Image

  • Log in as a client and resubmit the form, then status changes to resubmitted.

    Image

  • Log in as a clerk and claim the task. Submit his/her review with feedback. Then the status changes to reviewed.

    Image

  • This action is completed, you can now log out and go to Approver Steps.

Approver Steps

  • Log in to http://localhost:3000 (forms-flow-web) with valid [default user credentials for Approver](default user credential.html).

  • After the login is successful you will be redirected to http://localhost:3000/task.

    Image

  • The associated task can be found for the Approver role in the Task Menu section.

  • On claiming the task, the Approver is able to mark the form with his/her review (review approved/rejected/returned) and can add feedback.

    Image

    Image

  • Now that this action is completed, the New Business License Application has completed its workflow.